<template>
  <div class="content" v-if="allWeatherData?.forecasts?.length">
    <div class="title">
      你正在预览{{currentCityData}}的天气信息<span v-if="!isCitySaved">，可以通过右上角的"+"号按钮保存起来</span>
    </div>
    <div class="container info" v-if="currentWeatherData.lives[0]">
      <h1>
        当日气温是:&nbsp;&nbsp;{{
          currentWeatherData.lives[0].temperature
        }}摄氏度
      </h1>
      <h1>当日天气是:&nbsp;&nbsp;{{ currentWeatherData.lives[0].weather }}</h1>
      <h1>
        当日风向是:&nbsp;&nbsp;{{ currentWeatherData.lives[0].winddirection }}风
      </h1>
      <h1>
        当日风力是:&nbsp;&nbsp;{{ currentWeatherData.lives[0].windpower }}级
      </h1>
    </div>
    <hr />
    <div class="container info">
      <ThirdComp :allWeatherData="allWeatherData" :showTitle="false"/>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch,computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ThirdComp from './PageComp/ThirdComp.vue'
import { getWeatherData } from '@/api'
const route = useRoute()
const router = useRouter()
const currentCityData = ref('')
//实时天气
const currentWeatherData = ref({
  lives: [],
})
//近期天气
const allWeatherData = ref({
  forecasts: [],
})
const span =ref(null)
const liData = ref(JSON.parse(localStorage.getItem('savedCities')) || [])
const isCitySaved = computed(()=>{
    return currentCityData.value && liData.value.some(item=>item.name===currentCityData.value)
})
onMounted(async () => {
  try {
    currentCityData.value = route.query.search || ''
    if (!currentCityData.value) {
      console.warn('未获取到城市名称，跳回首页')
      router.push('/weather')
      return
    }
    const adcode = route.params.id || ''
    currentWeatherData.value = await getWeatherData(adcode,'base')
    //获取近期天气数据
    allWeatherData.value = await getWeatherData(adcode,'all')
  } catch (err) {
    currentWeatherData.value = { lives: [] }
    allWeatherData.value = { forecasts: [] }
  }
})
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  color: rgba(255, 255, 255, 1);
  .title {
    padding: 0.5rem;
    text-align: center;
    background-color: rgba(0, 78, 113, 1);
    // span {
    //   display: none;
    // }
  }
  .info {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 1.5rem;
    gap: 1rem;
    width: 100%;
    color: rgba(255, 255, 255, 1);
    margin-right: auto;
    margin-left: auto;
    padding-right: 10rem;
    padding-left: 10rem;
    h1 {
      font-size: inherit;
      font-weight: inherit;
    }
  }
  hr {
    border-color: rgba(255, 255, 255, 0.1);
    margin-top: 1.5rem;
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
}
</style>
